import React from 'react'
import {
    Card, Form, Icon, Input, Button, Checkbox,
} from 'antd';
import action from "../store/action";
import {connect} from "react-redux";
import {login} from '../api/userRest'

class Login extends React.Component {

    componentDidMount() {

        // 默认用户名密码
        this.props.form.setFieldsValue({username:'admin', password: '111111'});

    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });



        let formData = this.props.form.getFieldsValue();
        console.info('--------' + JSON.stringify(formData) + '-------');

        let userLogin = login(formData);
        userLogin.then(ret =>{
            let token = ret.data.data
            localStorage.setItem('TOKEN', token)
            window.location.href = '#/'
        });

    }



    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div style={{background: 'url('+require('../static/images/login_bg.jpg')+') no-repeat 0px 0px', backgroundSize: 'cover', paddingTop: '50px', height: '100%'}}>
                <Card title="登录" bordered={false} style={{ width: 400, background: '#2b2b36', borderRadius:'8px', margin: 'auto auto', color: 'white' }}>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: 'Please input your username!' }],
                            })(
                                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: 'Please input your Password!' }],
                            })(
                                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                Log in
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }
}

const _Login = Form.create()(Login);
export default _Login;